<template>
    <div class="sx-activePhotoWall-index">
        <div class="sx-photo-box">
            <div class="sx-photoItem-containar" v-for="(item,index) in imgsUrlList" v-bind:key="index">
                <img :ref="'img' + index" :src="item.url" alt="">
                <span>活动title</span>
            </div>
        </div>        
    </div>
</template>
<script>

export default{
    name: 'activePhotoWall',
    data() {
        return {
            viewHeigth: 160,
            imgsUrlList: [
                {
                    id: 0,
                    url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F73%2F5f%2Fd0%2F735fd0724180fdf9f7f3aac5a785fed1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634862280&t=4181600836ecf2751de5a82547d06b8c'
                },
                {
                    id: 1,
                    url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic19.nipic.com%2F20120225%2F9165552_152408494000_2.jpg&refer=http%3A%2F%2Fpic19.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634862280&t=55d540da427d14ae09f965802d11bb4b'
                },
                {
                    id: 2,
                    url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01f5795541d50b00000115410b205a.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634862280&t=cebcb970d65b2497bfc665d62d6c9fdf'
                },
                {
                    id: 3,
                    url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F120718%2F3-120GQA140.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634862280&t=5abf52672003a2de6ca741f6f6d43919'
                },
                {
                    id: 4,
                    url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01007355457dc50000019ae9e461e7.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634862280&t=f46ab735a081aba7192fd12b726750b6'
                },
                {
                    id: 5,
                    url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg3.redocn.com%2Ftupian%2F20140711%2Fkatongdongwulachetonghuamenghuanbeijing_2595473.jpg&refer=http%3A%2F%2Fimg3.redocn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634862380&t=3501d07c1741d5dca2267dfa2c9d7a29'
                },
            ]
        }
    },
    components: {

    },
    mounted() {
        this.filterImg()
    },
    methods: { 
        filterImg(){
            let imgList = this.imgsUrlList
            let _this = this
            for(let i = 0 ; i < imgList.length; i++){
                // 获取img元素原来的宽高
                let img = new Image()
                img.src = imgList[i].url
                img.onload = () => {
                    let imageWidth = Math.floor(img.width * this.viewHeigth / img.height)
                    // console.log(imageWidth)
                    // console.log(this.viewHeigth)
                    // console.log(img.width)
                    // console.log(img.height)
                    this.$refs['img' + i][0].width = imageWidth
                    this.$refs['img' + i][0].height = this.viewHeigth
                }
                
            }
        }   
    }
}
</script>

<style lang="scss">
.sx-activePhotoWall-index{
    box-sizing: border-box;
    padding: 40px;
    width: 100%;
    background: rgb(126, 226, 226);
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}
.sx-photo-box{
    box-sizing: border-box;
    width: 1000px;
    margin: 0 auto;
    background-color: rgb(150, 245, 182);
}
.sx-photoItem-containar{
    font-size: .8rem;
    margin: 5px;
    display: inline-block;
    background-color: #fff;
    border-radius: 5px;
}
.sx-photoItem-containar img{
    border-radius: 10px;
    padding: 5px;
    display: block;
}
.sx-photoItem-containar span{
    display: block;
    text-align: center;
    padding: 10px 0;
}

</style>